<template>
    <el-dialog
        v-model="props.isShow"
        title="详情"
        width="70%"
        :before-close="handleClose"
        destroy-on-close
        top="5vh"
        style="height: 90%"
        @open="open"
    >
        <el-scrollbar height="800">
            <div style="width: 99%">
                <el-divider content-position="left">用户信息</el-divider>
                <el-form>
                    <el-row :gutter="24">
                        <el-col :span="6">
                            <el-form-item label="头像：">
                                <el-image style="width: 100px; height: 100px" :src="fullUrl(props.row.avatar)"
                                          fit="cover"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="ID：">
                                {{ props.row.id }}
                            </el-form-item>

                            <el-form-item label="用户名：">
                                {{ props.row.username }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="昵称：">
                                {{ props.row.nickname }}
                            </el-form-item>
                            <el-form-item label="绑定城市：">
                                {{ props.row.area.name }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="平台抽成比例：">
                                <span style="color: red;">{{ props.row.commission }}</span> %
                            </el-form-item>
                            <el-form-item label="余额：">
                                <span style="color: red;">{{ props.row.money }}</span> 元
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="">
                            </el-form-item>


                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="手机号：">
                                {{ props.row.mobile }}
                            </el-form-item>

                        </el-col>
                    </el-row>
                </el-form>
                <el-divider content-position="left">余额变动信息</el-divider>
                <el-table :data="moneyLog" border style="height:500px">
                    <el-table-column label="ID" prop="id" width="80"></el-table-column>
                    <el-table-column label="变动金额" prop="money" width="120"></el-table-column>
                    <el-table-column label="变动时间" prop="create_time" width="180"></el-table-column>
                    <el-table-column label="类型" prop="type" width="180">
                        <template #default="{row}">
                            <el-tag v-if="row.type == 1" type="success">订单收入</el-tag>
                            <el-tag v-else-if="row.type == 2" type="info">提现</el-tag>
                            <el-tag v-else-if="row.type == 3" type="warning">增加余额</el-tag>
                            <el-tag v-else-if="row.type == 4" type="danger">减少余额</el-tag>
                            <el-tag v-else-if="row.type == 5" type="danger">提现驳回</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="备注" prop="memo"></el-table-column>
                </el-table>
                <el-pagination background layout="prev, pager, next" :total="total"/>
            </div>
        </el-scrollbar>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">关闭</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import {fullUrl} from "/@/utils/common";
import {getAgentMoneyLog} from "/@/api/backend/agent";
import {ref} from "vue";
import Template from "/@/lang/backend/en/sms/template";

const props = defineProps({
    isShow: {
        type: Boolean,
        default: false
    },
    row: {
        type: Object,
        default: {}
    }
})

const moneyLog = ref()
const total = ref()
const open = () => {
    getAgentMoneyLog({
        id: props.row.id
    }).then(res => {
        moneyLog.value = res.data.list
        total.value = res.data.total
    })
}

const emit = defineEmits(['close'])
const handleClose = () => {
    emit('close')
}
</script>
<style scoped lang="scss">

</style>
